<template>
  <div class="artCommit">
      <div class="artForm">
        <el-form label-width="100px" :model="art_form" :rules="artFromRules" ref="artFormRef">
            <el-form-item label="心情:" class="tagClass">
                <el-input placeholder="说出你现在的心情..."></el-input>
            </el-form-item>
            <el-form-item label="标题:" class="tagClass">
                <el-input placeholder="页面太空旷，随便加点东西..."></el-input>
            </el-form-item>
            <el-form-item label="标签:" class="tagClass" prop="tag">
                <artTag ref="artTag" @tagPass="tagPass" />
            </el-form-item>
            <el-form-item label="文章:" prop="content">
                <el-input type="textarea" v-model="art_form.content" :rows="10"
                placeholder="请输入内容"
                maxlength="10000"
                resize = "none"
                show-word-limit/>
            </el-form-item>
            <el-form-item id="btn">
                <el-button type="primary" icon="el-icon-s-check" @click="artcommit" round>提交</el-button>
                <el-button type="info" icon="el-icon-refresh-right" @click="resetForm" round>重置</el-button>
            </el-form-item>
        </el-form>
</div>
  </div>
</template>

<script>
    import artTag from '@/views/userMain/userMainHome/artCommit/artTag'
    export default {
        name: 'artCommit',
        components: {
            artTag
        },
        data() {
            return {
                //文章绑定
                art_form: {
                    markId: null,
                    content: '',
                    typeList: [],
                },
                //文章预验证
                artFromRules: {
                    content: [{
                        required: true,
                        message: '请填写文章',
                        // trigger: 'blur'
                    }, {
                        min: 200,
                        max: 10000,
                        message: '长度在200到10000字之间'
                    }],
                }
            }
        },
        methods: {
            // 文章提交
            artcommit() {
                this.$http.post('addArticle', this.art_form).then((res) => {
                    if (res.data.code == 200) {
                        this.$message.success('提交成功')
                        this.art_form.content = ''
                        this.$refs.artTag.dynamicTags = []
                    } else {
                        this.$message.error('提交失败')
                    }
                })
            },
            //重置表单
            resetForm() {
                this.art_form.content = ''
                this.$refs.artTag.dynamicTags = []
            },
            //标签赋值进表单
            tagPass() {
                this.art_form.typeList = this.$refs.artTag.dynamicTags
            }
        },
        created() {
            //从vuex中读取用户id
            if (this.$store.state.userData != null) {
                this.art_form.markId = this.$store.state.userData.id
                    //储存用户id到session
            } else {
                // console.log(this.$store.state.loginId);
                this.art_form.markId = this.$store.state.loginId
            }
        },
    }
</script>

<style scoped>
    .tagClass {
        margin-bottom: 70px;
    }
    
    .artCommit {
        position: relative;
        height: 90vh;
    }
    
    .artForm {
        position: absolute;
        width: 60vw;
        bottom: -5%;
        left: 3%;
    }
    
    #btn {
        display: flex;
        margin-top: 60px;
        justify-content: flex-end;
    }
</style>